<template>
  <div class="module">
    <div class="btns">

      <el-form size="small" inline  style="float: left; margin-left:10px;">
        <el-form-item label="名称">
          <!-- v-model="param.name"  按名称查询 -->
          <el-input v-model="param.name"></el-input>
          </el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="loadModule">搜索</el-button>
          <el-button type="primary" size="small" style=" margin-left:10px;" @click="downloadHandler">导出</el-button>
      </el-form>
      <div style=" margin-right:24px; float:right;">
        <el-button type="primary" size="small" @click="toAddHandler">新增</el-button>
      </div>
    </div>
        
      <!-- {{module}} -->
      <el-table size="small" :data="module">
          <!-- <el-table-column label="序号" prop="id" align="center"></el-table-column> -->
          <el-table-column label="序号" type="index" align="center"></el-table-column>
          <el-table-column label="名称" prop="name" align="center"></el-table-column>
          <el-table-column label="算法" prop="algorithm" align="center"></el-table-column>
          <el-table-column label="介绍" prop="introduce" align="center"></el-table-column>
          <el-table-column label="状态" prop="status" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">
              <p>{{scope.row.createTime | fmtDate}}</p>
            </template>
            
          </el-table-column>
          <el-table-column label="所属应用ID" prop="applicationId" align="center"></el-table-column>
          <el-table-column label="用户ID" prop="userId" align="center"></el-table-column>
          <el-table-column label="数据集ID" prop="datasetId" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <!-- 定制 插槽 -->
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="editHandler(scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="deleteHandler(scope.row)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>

  </div>
</template>



<script>
import { get ,post, del} from '@/utils/request'

export default {

  data(){
    return{
      //参数，用于保存检索的参数
      param:{
        name:""
      },
      
      //组件模板中需要的数据（[]:数组，{}:对象）
      module:[]         
    }
  },
  //方法或js的事件处理函数
  methods:{

    //导出
    downloadHandler(){
      let url = "http://39.106.31.187:8888/module/download"
      if(this.param.name){
        url = "http://39.106.31.187:8888/module/download?name="+this.param.name;
      }
      window.location.href =url;
    },

    //修改
    editHandler(row){
      //跳转到修改页面 (和新增操作公用一个页面)
      //携带当前行的数据
      this.$router.push({
        path: "/module/create",       //跳转的路由 (前端路由)
        query: row                    //携带参数
      })
    },

    //删除
    deleteHandler(row){
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://39.106.31.187:8888/module/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadModule();
        });
      });
    },

    //跳转
    toAddHandler(){
      this.$router.push("/module/create");
    },
    //查询后台中的应用信息
    loadModule(){
        let url = "http://39.106.31.187:8888/module/query"
        get(url, this.param).then(resp => {
            this.module = resp.data;
        })
    }
  },
  //页面加载的时候会执行的方法
  created(){
      this.loadModule();
  }
}
</script>


<style scoped>
  .btns {
    margin-top: 20px;
  }
</style>